<template>
  <el-row>
    <el-col :span="6">
      <img src="../assets/login/banner.4994397e.jpg" class="h-screen"/>
    </el-col>
    <el-col :span="18">
      <div class="flex flex-auto ml-4 items-center m-3">
        <img src="../assets/logobig.png" @click="gotoIndex" class="cursor-pointer"/>
        <div class="ml-auto">
          <span
              class="
              mr-5
              text-xs text-gray-400
              cursor-pointer
              hover:text-orange-500
            "
          >用户协议</span
          >
          <span
              class="
              mr-5
              text-xs text-gray-400
              cursor-pointer
              hover:text-orange-500
            "
          >隐私政策</span
          >
          <span
              class="
              mr-5
              text-xs text-gray-400
              cursor-pointer
              hover:text-orange-500
            "
          >帮助中心</span
          >
        </div>
      </div>
      <div class="flex items-center flex-col justify-center h-96">
        <div class="relative flex justify-start">
          <div
              class="mr-6 text-xl cursor-pointer"
              @click="tagerBorder = 0"
              :class="tagerBorder == 0 ? 'font-bold' : ''"
          >
            登录
          </div>
          <div
              class="text-xl cursor-pointer"
              @click="tagerBorder = 1"
              :class="tagerBorder == 1 ? 'font-bold' : ''"
          >
            注册
          </div>
          <div
              id="border"
              class="
              rounded-sm
              duration-500
              -mb-2
              transform
              absolute
              bottom-0
              w-12
              h-1
              bg-orange-600
            "
              :class="tagerBorder == 1 ? 'translate-x-16' : ''"
          ></div>
        </div>
        <br/>

        <div
            v-show="tagerBorder == 0"
            :class="
            tagerBorder == 0 ? 'animate__animated animate__fadeInLeft' : ''
          "
            class="h-60"
        >
          <div class="relative h-20">
            <input
                autocomplete="no"
                @click="targetUsername = 1"
                v-model="loginInfo.username"
                name="telephone"
                class="w-72 h-14 pl-6 pr-6 pb-3 pt-7"
                :class="loginInfo.username == '' && targetUsername == 1 ? '' : ''"
            />
            <label
                class="
                text
                absolute
                w-28
                top-4
                left-2
                pointer-events-none
                duration-300
                transition-all
              "
                :class="[
                targetUsername == 1 && loginInfo.username == ''
                  ? 'top-4 importDaColor'
                  : '',
                targetUsername == 1 && loginInfo.username != ''
                  ? 'myfont-1-importance importNoColor left-6'
                  : '',
              ]"
            >邮箱/手机号码</label
            >
            <div
                class="mt-2 text-xs"
                :class="
                loginInfo.username == '' && targetUsername == 1
                  ? ' text-red-600 block'
                  : 'hidden'
              "
            >
              请输入账号
            </div>
          </div>
          <div class="relative mt-3 h-20">
            <input
                autocomplete="no"
                @click="targetPassword = 1"
                v-model="loginInfo.password"
                type="password"
                name="telephone"
                class="w-72 h-14 pl-6 pr-6 pb-3 pt-7"
            />
            <label
                class="
                text
                absolute
                w-10
                pointer-events-none
                left-2
                top-4
                duration-300
                transition-all
              "
                :class="[
                targetPassword == 1 && loginInfo.password == ''
                  ? 'top-4 importDaColor'
                  : '',
                targetPassword == 1 && loginInfo.password != ''
                  ? 'myfont-1-importance importNoColor left-6'
                  : '',
              ]"
            >密码</label
            >
            <div
                class="mt-2 text-xs"
                :class="
                loginInfo.password == '' && targetPassword == 1
                  ? ' text-red-600 block'
                  : 'hidden'
              "
            >
              请输入密码
            </div>
          </div>
          <br/>
          <div class="relative">
            <input id="agree" type="checkbox" v-model="isBool" name="agree"/>
            <label
                id="mylabel"
                for="agree"
                class="absolute left-2 cursor-pointer"
            ></label>
            <span class="text-gray-400 text-sm absolute w-96 left-7"
            >已阅读并同意xxx<span class="cursor-pointer text-black font-thin"
            >用户协议</span
            >和<span class="cursor-pointer text-black font-thin"
            >隐私政策</span
            ></span
            >
          </div>
          <div class="mt-7">
            <button
                class="
                text-white
                duration-300
                transition-colors
                pt-4
                pb-4
                pl-32
                pr-32
              "
                :class="isBool ? ' bg-orange-500' : 'bgImportanceColor'"
            >
              登录
            </button>
          </div>
          <div class="w-72 mt-4">
            <span class="float-left cursor-pointer text-orange-500"
            >忘记密码?</span
            >
            <span class="float-right cursor-pointer text-orange-500"
            >邮箱登录</span
            >
          </div>
        </div>
        <div
            v-show="tagerBorder == 1"
            :class="
            tagerBorder == 1 ? 'animate__animated animate__fadeInRight' : ''
          "
            class="h-60"
        >
          <Register></Register>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import Register from "../views/register.vue"
import {ref, reactive, getCurrentInstance, onMounted, onBeforeMount, toRaw, Ref} from "vue";
import {useRoute, useRouter} from "vue-router"

const loginInfo: Object = reactive({username: "", password: ""});
const targetUsername: Ref<number> = ref(0); //用来对username输入框进行逻辑控制显示
const targetPassword: Ref<number> = ref(0); //用来对password输入框进行逻辑控制显示
let tagerBorder: Ref<number> = ref(1);

const isBool: Ref<Boolean> = ref(false);
const $router = useRouter();
const $route = useRoute();
// 显示登录界面还是注册界面
(function settagerBorder() {
  if ($route.params.target === undefined) {
    tagerBorder = ref(0);
  } else
    tagerBorder = ref($route.params.target as unknown) as Ref<number>;

})()

function gotoIndex() {
  $router.push({
    path: '/'
  })
}
</script>
<style scoped>
#agree + label {
  border-color: #dddddd;
  border: 1px solid;
  @apply absolute  w-5 h-5  top-0 rounded-sm;
}

#agree:checked ~ label {
  border: none;
  @apply bg-orange-400;
}

#agree:checked + label::before {
  display: flex;
  content: "\2713";
  @apply items-start justify-center;
  font-size: 10px;
  color: white;
}

input[name="agree"] {
  border-color: #dddddd;
  background-color: #f9f9f9;
  visibility: hidden;
}

input[name="agree"]:checked {
  @apply bg-white;
}

#mylabel:hover {
  border: 1px solid rgba(249, 115, 22, 1);
}

input {
  background-color: #f9f9f9 !important;
  @apply text-black relative  border-gray-400;
}

input:focus {
  border: none;
  background-color: #fcf2f3 !important;
  border: 1px solid;
  outline: none;
  box-shadow: 0 0 0 2px rgb(255 92 0 / 20%);
  @apply border-red-500;
}

input[name="telephone"]:focus ~ .text {
  top: 0.25rem !important;
  @apply text-xs left-6 text-orange-500;
}

.importDaColor {
  color: rgba(249, 115, 22, 1) !important;
}

.importNoColor {
  color: rgba(161, 161, 171) !important;
}

.myfont-1-importance {
  top: 0.25rem;
  font-size: 12px;
}

.mytranslate-x {
  @apply translate-x-16;
}

#border {
  margin-left: -5px;
}

.bgImportanceColor {
  background-color: #ffcba9;
}

.animate__animated {
  animation-duration: 700ms;
}
</style>
